<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Vue中的作用域插槽</title>
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="root">
		<child>
			<template slot-scope="props">
				<li>{{props.item}}</li>
			</template>
		</child>
	</div>
</body>
<script>
	Vue.component('child', {
		template: '<div>' +
			'<ul>' +
			'<slot v-for="item of list" ' +
			':item=item>' +
			'</slot>' +
			'</ul>' +
			'</div>',
		data: function () {
			return {
				list: [1, 2, 3, 4, 5]
			}
		}
	})
	var vm = new Vue({
		el: '#root'
	})
</script>

</html>
